﻿<script setup lang="ts" name="EpComprehensiveForm">
import ChinaArea from '@/plugins/chinaArea'
import type { FormInstance } from 'element-plus'
import { storeToRefs } from 'pinia'
import { useSystemConfigStore } from '@/store/storage/systemConfigStore'
const systemConfigStore = useSystemConfigStore()
const { systemConfig } = storeToRefs(systemConfigStore)

const ruleFormRef = ref<FormInstance>()
const chinaArea = new ChinaArea({ leave: 3, isall: false })
const chinaAreaOptions = ref(chinaArea.chinaData())
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const chinaData = new ChinaArea().chinaAreaflat
const labelPosition: any = ref('right')
const sizeForm = ref({
  name: '',
  city: '',
  principal: '',
  date1: '',
  date2: '',
  level: [],
  type: [],
  audience: '',
  style: '',
  star: 0,
  store: [],
  color: 'rgba(255, 69, 0, 0.68)',
  voucher: true,
  voucherType: '',
  denomination: 0,
  number: 1,
  ValidityPeriod: '',
  startTime: '',
  endTime: '',
  desc: ''
})
const voucherList = [
  { label: '无门槛', value: 1 },
  { label: '满减券', value: 2 },
  { label: '抵扣券', value: 3 },
  { label: '折扣券', value: 4 }
]

function onSubmit(formEl: FormInstance | undefined) {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })
}
const handleChinaAreaChange = (e) => {
  console.log(e)
  // const one = chinaData[e[0][0]]
  // const two = chinaData[e[0][1]]
  // const three = chinaData[e[0][2]]
  // console.log(one, two,three)
}
const caderProps = {
  multiple: true
}
const predefineColors = ref([
  '#ff4500',
  '#ff8c00',
  '#ffd700',
  '#90ee90',
  '#00ced1',
  '#1e90ff',
  '#c71585',
  'rgba(255, 69, 0, 0.68)',
  'rgb(255, 120, 0)',
  'hsv(51, 100, 98)',
  'hsva(120, 40, 94, 0.5)',
  'hsl(181, 100%, 37%)',
  'hsla(209, 100%, 56%, 0.73)',
  '#c7158577'
])
const storeList = [
  { key: 1, label: '门店1', disabled: false },
  { key: 2, label: '门店2', disabled: false },
  { key: 3, label: '门店3', disabled: false },
  { key: 4, label: '门店4', disabled: false },
  { key: 5, label: '门店5', disabled: false },
  { key: 6, label: '门店6', disabled: false },
  { key: 7, label: '门店7', disabled: false },
  { key: 8, label: '门店8', disabled: false },
  { key: 9, label: '门店9', disabled: false },
  { key: 10, label: '门店10', disabled: false },
  { key: 11, label: '门店11', disabled: false }
]
const uploadFileList = ref([
  {
    name: 'food.jpeg',
    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
  },
  {
    name: 'food2.jpeg',
    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
  }
])
const validateDate1 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请选择活动日期'))
  } else {
    if (sizeForm.value.date1 !== '') {
      if (!ruleFormRef.value) return
      ruleFormRef.value.validateField('date1', () => null)
    }
    callback()
  }
}
const validateDate2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请选择活动时间'))
  } else {
    if (sizeForm.value.date2 !== '') {
      if (!ruleFormRef.value) return
      ruleFormRef.value.validateField('date2', () => null)
    }
    callback()
  }
}
const rules = reactive({
  name: [
    { required: true, message: '请输入活动名称', trigger: 'blur' }
  ],
  city: [
    {
      required: true,
      message: '请选择活动覆盖地区',
      trigger: 'change'
    }
  ],
  date1: [{ validator: validateDate1, trigger: 'change' }],
  date2: [{ validator: validateDate2, trigger: 'change' }],
  desc: [
    { required: true, message: '请输入活动备注内容', trigger: 'blur' }
  ]
})
</script>
<template>
  <el-space :size="systemConfig.space" fill direction="vertical">
    <el-card shadow="never" class="no-border no-radius">
      <el-alert title="综合表单页将element-plus表单相关组件全部使用，并添加表单验证，自定义验证规则、集成省市区三级联动插件。" type="success" :closable="false" show-icon />
      <div class="form-header">
        <el-radio-group v-model="labelPosition">
          <el-radio-button label="left">左对齐</el-radio-button>
          <el-radio-button label="right">右对齐</el-radio-button>
          <el-radio-button label="top">顶部对齐</el-radio-button>
        </el-radio-group>
      </div>
      <el-form ref="ruleFormRef" :model="sizeForm" :rules="rules" label-width="auto" :label-position="labelPosition">
        <el-form-item label="活动名称" prop="name">
          <el-input v-model="sizeForm.name" />
        </el-form-item>
        <el-form-item label="涵盖地区" prop="city">
          <el-cascader v-model="sizeForm.city" :options="chinaAreaOptions" :props="caderProps" collapse-tags collapse-tags-tooltip clearable @change="handleChinaAreaChange" />
        </el-form-item>
        <el-form-item label="活动负责人">
          <el-select v-model="sizeForm.principal" placeholder="请选择活动负责人">
            <el-option label="张三" value="zs" />
            <el-option label="李四" value="ls" />
            <el-option label="王五" value="ww" />
            <el-option label="任六" value="rl" />
          </el-select>
        </el-form-item>
        <el-form-item label="活动时间" required>
          <div class="item-form">
            <div class="item-flex">
              <el-form-item prop="date1"><el-date-picker v-model="sizeForm.date1" type="date" placeholder="选择日期" /></el-form-item>
            </div>
            <div class="item-hyphen">-</div>
            <div class="item-flex">
              <el-form-item prop="date2"><el-time-picker v-model="sizeForm.date2" placeholder="选择时间" /></el-form-item>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="活动级别">
          <el-checkbox-group class="checkbox-button" v-model="sizeForm.level">
            <el-checkbox-button :label="1" name="level">一线城市门店</el-checkbox-button>
            <el-checkbox-button :label="2" name="level">二线城市门店</el-checkbox-button>
            <el-checkbox-button :label="3" name="level">三线城市门店</el-checkbox-button>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="活动类型" prop="type">
          <el-checkbox-group v-model="sizeForm.type">
            <el-checkbox label="online" name="type" border>线上推广</el-checkbox>
            <el-checkbox label="offline" name="type" border>线下地推</el-checkbox>
            <el-checkbox label="private" name="type" border>私域引导</el-checkbox>
            <el-checkbox label="store" name="type" border>门店促销</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="受众群体">
          <el-radio-group class="radio-button" v-model="sizeForm.audience">
            <el-radio-button label="elderly">老年人</el-radio-button>
            <el-radio-button label="middle-aged">中年人</el-radio-button>
            <el-radio-button label="young">年轻人</el-radio-button>
            <el-radio-button label="kid">小孩子</el-radio-button>
            <el-radio-button label="men">男人</el-radio-button>
            <el-radio-button label="women">女人</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="活动风格">
          <el-radio-group v-model="sizeForm.style">
            <el-radio border :label="'globalization'">国际化路线</el-radio>
            <el-radio border :label="'popularize'">大众化路线</el-radio>
            <el-radio border :label="'technology'">技术化路线</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="会员门槛">
          <el-rate v-model="sizeForm.star" :texts="['一星会员', '二星会员', '三星会员', '四星会员', '五星会员']" show-text />
        </el-form-item>
        <el-form-item label="参与门店">
          <el-transfer v-model="sizeForm.store" filterable :data="storeList" :titles="['门店列表', '已选门店']" />
        </el-form-item>
        <el-form-item label="物料资源">
          <el-upload class="el-upload-wrap" drag action="https://jsonplaceholder.typicode.com/posts/" multiple :file-list="uploadFileList">
            <svg-icon class="el-icon--upload" icon="ep:upload-filled"></svg-icon>
            <div class="el-upload__text">
              将文件拖拽到这里或者
              <em>点击上传</em>
            </div>
            <template #tip>
              <div class="el-upload__tip">文件限制大小在10M以内</div>
            </template>
          </el-upload>
        </el-form-item>
        <el-form-item label="活动主题色">
          <el-color-picker v-model="sizeForm.color" show-alpha :predefine="predefineColors" />
        </el-form-item>
        <el-form-item label="发放礼品券">
          <el-switch v-model="sizeForm.voucher" />
        </el-form-item>
        <el-form-item label="礼品券类型" v-if="sizeForm.voucher">
          <el-select v-model="sizeForm.voucherType" :options="voucherList" placeholder="请选择礼品券类型" />
        </el-form-item>
        <el-form-item label="礼品券面额" v-if="sizeForm.voucher">
          <el-slider v-model="sizeForm.denomination" :max="999" />
        </el-form-item>
        <el-form-item label="礼品券数量" v-if="sizeForm.voucher">
          <el-input-number v-model="sizeForm.number" :min="1" />
        </el-form-item>
        <el-form-item label="礼品券有效期" v-if="sizeForm.voucher">
          <el-date-picker v-model="sizeForm.ValidityPeriod" type="datetimerange" range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" />
        </el-form-item>
        <el-form-item label="礼品券使用时间" v-if="sizeForm.voucher">
          <el-time-select v-model="sizeForm.startTime" :max-time="sizeForm.endTime" placeholder="开始时间" start="08:30" step="00:15" end="18:30" />
          <el-time-select v-model="sizeForm.endTime" :min-time="sizeForm.startTime" placeholder="结束时间" start="08:30" step="00:15" end="18:30" />
        </el-form-item>
        <el-form-item label="活动备注" prop="desc">
          <el-input v-model="sizeForm.desc" type="textarea" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit(ruleFormRef)">创建活动</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </el-space>
</template>

<style scoped lang="scss">
.el-space {
  width: 100%;
  padding: var(--el-space) var(--el-space) 0;
}

.no-border {
  border: none;
}

.no-radius {
  border-radius: 0;
}

.form-header {
  margin: var(--el-space) 0;
}

.item-form {
  display: flex;
  flex: 1;

  .item-flex {
    flex: 1;

    :deep(.el-date-editor.el-input) {
      display: inline-flex;
      width: 100%;
    }

    .el-form-item {
      :deep(.el-form-item__label-wrap) {
        margin: 0 !important;
      }
    }
  }

  .item-hyphen {
    padding: 6px;
  }
}
</style>
